import Taro, { Component } from '@tarojs/taro'
import { View, Text ,Image} from '@tarojs/components'

import './index.scss'

import bgShadow from '../image/bg_shadow.png'

import scanIcon from '../image/post.png'

import homeSelectedIcon from '../image/ic_tab_home_red.png'
import homeDefaultIcon from '../image/ic_tab_home.png'

import infoSelectedIcon from '../image/ic_tab_shop_red.png';
import infoDefaultIcon from '../image/ic_tab_shop.png'

import jobSelectedIcon from '../image/ic_tab_job_red.png'
import jobDefaultIcon from '../image/ic_tab_job.png'

import meSelectedIcon from '../image/ic_tab_mine_red.png'
import meDefaultIcon from '../image/ic_tab_mine.png'

export default class index extends Component{

  constructor() {
    super(...arguments)
    this.state = {
      active : 0
    }
  }

  componentWillMount(){
    let _this = this;
    Taro.eventCenter.on('tabIndex' , (tabIndex) => {
      _this.setState({
        active:tabIndex
      })
    })
  }

  componentDidMount(){
  }

  onPostClick = () =>{
    Taro.navigateTo({
      url:`/pages/post/allPost`
    })
  }

  onHomeClick = ()=>{
    Taro.switchTab({
      url:`/pages/index/index`
    })
  }

  onInfoClick = ()=>{
    Taro.switchTab({
      url:`/pages/convenience/convenienceList`
    })
  }

  onMeClick = ()=>{
    Taro.switchTab({
      url:`/pages/me/me`
    })
  }

  onJobClick = () =>{
    Taro.switchTab({
      url:`/pages/job/jobList`
    })
  }

  render(){
    let active = this.state.active;

    let meText = active == 3 ?  'tabbar-text-selected' : 'tabbar-text'
    let homeText = active == 0 ? 'tabbar-text-selected' : 'tabbar-text'
    let jobText = active == 2 ?  'tabbar-text-selected' : 'tabbar-text'
    let infoText = active == 1 ? 'tabbar-text-selected' : 'tabbar-text'


    let meIcon = active == 3 ?  meSelectedIcon : meDefaultIcon
    let infoIcon = active == 1 ? infoSelectedIcon : infoDefaultIcon
    let jobIcon = active == 2 ? jobSelectedIcon : jobDefaultIcon
    let homeIcon = active == 0 ? homeSelectedIcon : homeDefaultIcon
    return(
      <View className='tabbar-container'>
        <Image className='tabbar-shadow' src={bgShadow} />
        <View className='tabbar-sub'>
          <View className='tabbar-sub-con'>
            <View className='tabbar-single' onClick={this.onHomeClick.bind(this)}>
              <Image className='tabbar-icon' src={homeIcon} />
              <Text className={homeText}>首页</Text>
            </View>
            <View className='tabbar-single' onClick={this.onInfoClick.bind(this)}>
              <Image className='tabbar-icon' src={infoIcon} />
              <Text className={infoText}>便民</Text>
            </View>
          </View>
          <View className='tabbar-sub-con'>
            <View className='tabbar-single' onClick={this.onJobClick.bind(this)}>
              <Image className='tabbar-icon' src={jobIcon} />
              <Text className={jobText}>招聘</Text>
            </View>
            <View className='tabbar-single' onClick={this.onMeClick.bind(this)}>
              <Image className='tabbar-icon' src={meIcon} />
              <Text className={meText}>我的</Text>
            </View>
          </View>
        </View>
        <View className='index-scan-container'>
          <Image className='index-scan' src={scanIcon} onClick={this.onPostClick.bind(this)}></Image>
          <Text className='scan-text'>发布</Text>
        </View>
      </View>
    )
  }

}



